<template>
    <f7-page class="bg-color-white">
        <f7-navbar :title="$t('m.tabs.mall')" back-link=" ">
            <!--<f7-nav-right>
                <f7-link class="txt-button" href="/mall-jifen-record/">{{$t('m.es2')}}</f7-link>
            </f7-nav-right>-->
        </f7-navbar>
        <!--<p class="text-right">
            <f7-link class="sub-rule-link" href="/rule2/">规则说明</f7-link>
        </p>
        <div class="content-padding">
            <f7-list>
                <f7-list-item :title="$t('m.es3')" :after="zichanData[2].num"></f7-list-item>
                &lt;!&ndash;        <f7-list-item :title="$t('m.es4')" :after="zichanData[16].num"></f7-list-item>&ndash;&gt;
                <f7-list-item :title="$t('m.es5')" :after="zichanData[15].num"></f7-list-item>
                <f7-list-item :title="$t('m.es6')" after="ZOL"></f7-list-item>
                <f7-list-item :title="$t('m.es7')" :after="$t('m.es5')"></f7-list-item>
            </f7-list>
            <p>{{$t('m.currencyValue')}}：1ZOL≈{{$store.getters.config.config.jifen_bili || '0.00'}}{{$t('m.es5')}}</p>

            <f7-list class="line-input-f7-list-item">
                <f7-list-item :title="$t('m.exchangeNumber')">
                    <input type="number" :placeholder="$t('m.exchangeNumberPlaceholder')" slot="after"
                           v-model="exchangeFormItems.num">
                </f7-list-item>
            </f7-list>
            <f7-button class="margin-t80" fill large color="blue" @click="showDialog = true">{{$t('m.exchange')}}
            </f7-button>
        </div>

        <van-dialog
                v-model="showDialog"
                :title="$t('m.dialog.title')"
                show-cancel-button
                @confirm="handleExchange"
                slot="fixed"
        >
            <div class="content-padding margin-t20">
                <custom-input type="password" :placeholder="$t('m.transactionPwdPlaceholder')"
                              v-model="exchangeFormItems.pwd"></custom-input>
            </div>
        </van-dialog>-->
        <div class="content-padding">
            <div class="my-card margin-t30 text-center">
                <p>{{$t('m.es5')}}</p>
                <h1 class="text-center">{{$store.getters.userInfo.user_money[15].num}}</h1>
            </div>
        </div>
    </f7-page>
</template>

<script>
    import {runJifenTrans} from "../api/wealth";

    export default {
        name: "mall-jifen",
        data() {
            return {
                exchangeFormItems: {
                    num: '',
                    pwd: ''
                },
                showDialog: false
            }
        },
        computed: {
            zichanData() {
                return this.$store.getters.userInfo.user_money;
            }
        },
        methods: {
            handleExchange() {
              runJifenTrans(this.exchangeFormItems).then(res => {
                    this.exchangeFormItems.pwd = '';
                    this.$f7router.navigate('/mall-jifen-record/')
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    p {
        color: $mainColor;
        padding: $padding20;
    }

    .sub-rule-link {
        color: #000;
        font-size: 28px;
    }
</style>
